/*
  学习目标：深入props-children属性的使用
  特指：组件标签夹着的内容区域, 类似vue中的插槽
  特点： children可以是任意数据类型
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    list: [1, 2, 3],
    person: {
      name: 'zs',
      age: 18,
    },
  };

  render() {
    const { list, person } = this.state;
    return (
      <div>
        {/*  boolean null undefined 数组 、对象  💥JSX */}
        <Child>123</Child>
        <Child>{123}</Child>
        <Child>{list}</Child>
        <Child>{person}</Child>

        <Child>
          <button>点我一下</button>
        </Child>
        <ChildFn>{() => <i>我是一个children传来的i标签</i>}</ChildFn>
      </div>
    );
  }
}

function Child({ children }) {
  return <h1>我是Child - {children}</h1>;
}

// 💥函数
function ChildFn({ children }) {
  return <h1>我是Child - {children()}</h1>;
}
